<template>
    <div class="article-edit">
        <el-tabs class="align-middle" v-model="defaultTab">
            <el-form ref="formRef" :model="formData" :rules="rules">
                <el-form-item label="标题" prop="title">
                    <div class="w-80">
                        <el-input v-model="formData.title" placeholder="请输入标题" type="textarea"  :autosize="{ minRows: 1, maxRows: 6 }"
                            maxlength="50" show-word-limit clearable />
                    </div>
                </el-form-item>
                <el-form-item label="作者" prop="author">
                    <div class="w-80">
                        <el-input v-model="formData.author" placeholder="请输入作者" type="textarea"  :autosize="{ minRows: 1, maxRows: 6 }"
                            maxlength="50" show-word-limit clearable />
                    </div>
                </el-form-item>
                <el-form-item label="显示时间" prop="show_time">
                    <div class="w-80">
                        <el-date-picker
                            v-model="formData.show_time"
                            type="datetime"
                            placeholder="请选择时间"
                            :default-time="defaultTime"
                            value-format="X"
                        />
                    </div>
                </el-form-item>
                <el-tab-pane label="资讯内容" name="relate_product">
                    <editor v-if="defaultTab == 'relate_product'" v-model="formData.contents" :height="520" />
                </el-tab-pane>
            </el-form>
        </el-tabs>
        <footer-btns>
            <el-button type="primary" @click="handleSave" v-prevent-reclick="3000">保存</el-button>
            <el-button @click="()=>{$router.back()}">取消</el-button>
        </footer-btns>
    </div>
</template>

<script lang="ts" setup name="informationDetail">
import { news_details } from '@/api/operation';
import { useRoute, useRouter } from 'vue-router';
import { news_save } from '@/api/operation'
import type { FormInstance } from 'element-plus';
import feedback from '@/utils/feedback';
const formRef = shallowRef<FormInstance>()
const defaultTab = ref('relate_product')
const formData:any = reactive({
    title: '',
    author: '',
    show_time: '',
    contents: '',
    area_id: '',
    id: 0
})
const defaultTime = new Date(2000, 1, 1, 12, 0, 0)

const rules = reactive({
    title: [{ required: true, message: '请填写标题', trigger: 'blur' }],
    author: [{ required: true, message: '请填写作者', trigger: 'blur' }],
    show_time: [{ required: true, message: '请选择时间', trigger: 'blur' }],
})

const route = useRoute()
const router = useRouter()
if (route.query.id) {
    formData.id = route.query.id
}
const handleSave = async () => {
    await formRef.value?.validate()
    let params = JSON.parse(JSON.stringify(formData));
    console.log(params)
    await news_save(params)
    if (route.query.id) {
        feedback.msgSuccess('保存成功')
    } else {
        feedback.msgSuccess('新增成功')
    }
    router.back()
}

const getDetail = async () => {
    await nextTick()
    const data = await news_details({
        id: route.query.id
    })
    Object.keys(formData).forEach((key) => {
        //@ts-ignore
        formData[key] = data[key]
    })
    formData.show_time = data.old_show_time;
}

route.query.id &&  getDetail()
</script>
<style scoped lang="scss">
::v-deep .el-tabs__nav-wrap {
    overflow-x: auto;
    width: 86%;
    margin-left: 10px;
}

::v-deep .el-tabs__nav-wrap::after {
    display: none;
}
.w-80{
    ::v-deep .el-date-editor.el-input{
        width: 100% !important;
    }
    ::v-deep .el-input__wrapper{
        width: 100% !important;
    }
}

</style>